<template>
  <footer class="footer">
    <span class="todo-count">
      <strong></strong> {{ unDoneNumber }} item left
    </span>
    <ul class="filters">
      <li>
        <a
          href=""
          :class="{ selected: visibility == 'all' }"
          @click.prevent="changeVisibility('all')"
          >All</a
        >
      </li>
      <li>
        <a
          href=""
          :class="{ selected: visibility == 'active' }"
          @click.prevent="changeVisibility('active')"
          >Active</a
        >
      </li>
      <li>
        <!-- :class="{ selected: visibility == 'Completed'} -->
        <a
          href=""
          :class="{ selected: visibility == 'completed' }"
          @click.prevent="changeVisibility('completed')"
          >Completed</a
        >
      </li>
    </ul>
    <button
      @click="delAllDone"
      v-show="todoList.length > unDoneNumber"
      class="clear-completed"
    >
      Clear completed
    </button>
  </footer>
</template>

<script setup>
let props = defineProps({
  unDoneNumber: {
    type: Number,
    default: 0,
  },
  visibility: {
    type: String,
    default: "all",
  },
  todoList: {
    type: Array,
    default: [],
  },
});

let emit = defineEmits(["changeVisibility", "delAllDone"]);

let changeVisibility = (flag) => {
  emit("changeVisibility", flag);
};

let delAllDone = () => {
  emit("delAllDone");
};
</script>